<template>
  <div class="liquidfill">
    <div style="width: 200px; height: 200px" ref="hyprometer"></div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {
      colorData: [
        [
          {
            value: 0.25,
            itemStyle: {
              normal: {
                color: "#E8D240",
              },
            },
          },
          {
            value: 0.2,
            itemStyle: {
              normal: {
                color: "#DEB982",
              },
            },
          },
          {
            value: 0.15,
            itemStyle: {
              normal: {
                color: "#FEE998",
              },
            },
          },
          {
            value: 0.1,
            itemStyle: {
              normal: {
                color: "#F1EDC8",
              },
            },
          },
        ],
        [
          {
            value: 0.6,
            itemStyle: {
              normal: {
                color: "#2C733B",
              },
            },
          },
          {
            value: 0.5,
            itemStyle: {
              normal: {
                color: "#519E72",
              },
            },
          },
          {
            value: 0.4,
            itemStyle: {
              normal: {
                color: "#6DCB8D",
              },
            },
          },
          {
            value: 0.3,
            itemStyle: {
              normal: {
                color: "#CDE460",
              },
            },
          },
        ],
        [
          {
            value: 1,
            itemStyle: {
              normal: {
                color: "#C62D32",
              },
            },
          },
          {
            value: 0.9,
            itemStyle: {
              normal: {
                color: "#E6463A",
              },
            },
          },
          {
            value: 0.8,
            itemStyle: {
              normal: {
                color: "#E75A50",
              },
            },
          },
          {
            value: 0.7,
            itemStyle: {
              normal: {
                color: "#EB7D70",
              },
            },
          },
        ],
      ],
    };
  },
  created(){
    console.log(this.data);
  },
  mounted(){
this.initEcharts();
  },
  updated() {
//     this.$nextTick(()=>{
// console.log(this.data);
    // this.initEcharts();
    // })
    

  },
  watch:{
    data(newval,oldval){
      console.log(newval);
      console.log(oldval);
    }
  },
  methods: {
    initEcharts() {
      let myecharts = this.$echarts.init(this.$refs.hyprometer);
      // console.log(this.data);
      let option = {
        series: [
          {
            type: "liquidFill",
            radius: "80%",
            data: this.colorData[this.data.rank],
            label: {
              normal: {
                textStyle: {
                  fontSize: 30,
                },
                formatter: () => {
                  return this.data.sum+"/件";
                },
              },
            },
            outline: {
              itemStyle: {
                // borderColor: "red",
              },
            },
          },
        ],
      };
      myecharts.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.liquidfill {
  width: 250px;
  height: 250px;
}
</style>